<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
${aier_doctype}
<html <s:property value="aier-html-xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<title>${aier_title}</title>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/multiselect.css" />
<link rel="stylesheet" href="${aier_css_url}jc/chosen.css">
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/reset.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/homeside.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/icon.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/btn.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />

<link rel="stylesheet" href="${aier_css_url}social/module/emotion.css" />
<link rel="stylesheet" href="${aier_css_url}social/user/relationship/relationship.css">
<link rel="stylesheet" href="${aier_css_url}social/module/xxs.css" />

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}ui.js"></script>
<script type="text/javascript" src="${aier_js_url}97/WdatePicker.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/ja.js"></script>
<script type="text/javascript" src="${aier_js_url}jc/cj.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/block.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/multiselect.js"></script>
<script src="${aier_js_url}trantime/jquery-aier.js"></script>
</head>
<body>

	<!-- 顶栏 -->
	<s:action name="userhomecomm_homeHead" namespace="/user" executeResult="true"></s:action>
	<!-- 顶栏结束 -->


	<div class="window-content">

		<!-- wrap  -->
		<div class="wrap wrap-homepage wrap-tri-col wrap-relationship clearfix">

			<!-- 主侧栏 -->
			<div class="home-side">

				<!-- 分组1  关注组 -->
				<div class="group-myfollow">

					<fieldset class="title-fieldset">
						<legend>关系中心</legend>
					</fieldset>
					<div class="tab-normal current">
						<a class="btn" href="${aier_url}user/usermyfollow.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>关注</span>
						</a>
					</div>
					<div class="tab-small">
						<a class="btn" href="${aier_url}user/usermyfollow.shtml">
							全部关注（<span id = "allfollow"></span>）
						</a>
					</div>
					<div id = "group"></div>

					<!-- 创建分组 -->
					<div class="create-group">
						<a href="javascript:void(0);" class="btn btn-normal-orange" id="createGroup">
							<span>创建分组</span>
						</a>

					</div>
				</div>
				<!--  -->

				<!-- 分组2  密友圈组 -->
				<div class="group-mycf">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/userchumscircle.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>密友圈</span>
						</a>
					</div>
				</div>
				<!--  -->				

				<!-- 分组3  粉丝组 -->
				<div class="group-myfans">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/usermyfans.shtml">
							<em class="icon-1 icon-1-teguan"></em>
							<span>粉丝</span>
						</a>
					</div>
				</div>
				<!--  -->	

				<!-- 分组4  找人 -->
				<div class="group-find">
					<div class="tab-normal">
						<a class="btn" href="${aier_url}user/lookup_findPeople.shtml">
							<em class="icon-1 icon-1-zhaoren"></em>
							<span>找人</span>
						</a>
					</div>
				</div>
				<!--  -->	
				
			</div>
			<!-- 左侧栏结束 -->


			<!-- 主区域 (右  -->
			<div class="main-area">
				<div class="myfollow-content">
					<div class="topbar">
						<div class="title">
							<span class="title-a">我的关注（<em id="cfollow"></em>个）</span>
						</div>
					</div>

					
					<div class="navbar">
						<div class="control">
							<a href="javascript:void(0);" class="btn btn-hover btn-normal-white" id="limitGroup">
								<span>
									<strong>全部关注</strong>
									<em class="select-arrow">
										<em class="down">◆</em>
									</em>
								</span>
							</a>
								
							<ul id="limitGroupList" class="hover-list" style="display:none">
								<li><a class="btn-group" href="javascript:void(0);" data-sortname="0">全部关注</a></li>
                                <li><a class="btn-group" href="javascript:void(0);" data-sortname="2">互相关注</a></li>
                                <li><a class="btn-group" href="javascript:void(0);" data-sortname="1">已关注</a></li>
							</ul>


							<a href="javascript:void(0);" class="btn btn-hover btn-normal-white" id="changeSort">
								<span>
									<strong>按关注时间排序</strong>
									<em class="select-arrow">
										<em class="down">◆</em>
									</em>
								</span>
							</a>
							<ul id="changeSortList" class="hover-list" style="display:none">
								<li><a class="btn-sort" href="javascript:void(0);" data-sortname="cdate">按关注时间排序</a></li>
                                <li><a class="btn-sort" href="javascript:void(0);" data-sortname="cfans">按粉丝数排序</a></li>
							</ul>
							<a href="javascript:void(0);" class="btn btn-orange-2 btn-disabled" id="addToGroup">
								<span>添加到
								</span>
							</a>
							<a href="javascript:void(0);" class="btn btn-orange-2 btn-disabled" id="cancleFollow">
								<span>取消关注
								</span>
							</a>
							<div class="tip" id="sumTip">
								已经选择<span></span>人 <a href="javascript:void(0);">取消</a>
							</div>
						</div>

						<!--  <div class="search">
							<div class="search-inner">
								<input type="text" placeholder="输入昵称或备注">
								<div class="btn btn-search">
									<a href="javascript:void(0);">
										<em class="icon-1 icon-1-search-2"></em>
									</a>
								</div>
							</div>
						</div>-->
					</div>

					<div class="list-area clearfix">
						<div class="clearfix" id = "followList">

						</div>
					</div>
                    <div id = "page"></div>

				</div>
				<!-- myfans func over -->
			</div>
			<!-- 主区域结束 -->


		</div>
		<!--  wrap end -->
		<!-- footer copyright -->
		<s:action name="userhomecomm_homeFooter" namespace="/user" executeResult="true"></s:action>
		<!-- /footer copyright -->
	</div>
	<!-- win content end -->
	


<!--  隐藏 dialog layers  -->
<div class="dialog" id="changeGroupDialog" title="添加或修改分组">
	 <!--<span class="object-info"></span> <span>这个数字用于 测试object</span> <br>-->
	<div>请选择分组</div>

	<div class="change-success" style="display:none">成功添加到<span></span>分组</div>
	<div class="dialog-form" id = "groupRadio">
		
	</div>

	<!--  <a class="new-group-link">创建新分组</a>-->

	<div class="new-group-bar" style="display:none">
		<input type="text" id="newGroup">
		<button id="newGroupBtn"></button>
	</div>
</div>


<div class="dialog" id="cancelFollowDialog" title="取消关注">
	确认要取消对<span id="cancelFollowName"></span>的关注吗?

</div>
<div class="dialog" id="letterDialog" title="私信">
	<div>
		<div>
			<textarea id="letterTextarea"></textarea>
		</div>
		<div>
			<a class="btn-emotion">插入表情</a>
		</div>
	</div>


</div>
<div class="dialog" id="inviteFollowDialog" title="求关注">

	<div>
		
		<label for="inviteFollowText">说点什么吧</label>
		<textarea name="inviteFollowText" id="inviteFollowText" cols="30" rows="10"></textarea>

	</div>
</div>


<div class="dialog" id="remarkNameDialog" title="设置备注名称" style="display:none;">
	<div>
		<label for="remarkNameInput">设置备注名</label>
		<input type="text" id="remarkNameInput">
	</div>

</div>


<div id="createGroupDialog" title="创建分组" style="display:none;">

	<div>
		<label for="createGroup">创建分组</label>
		<input type="text" id="groupName">
	</div>

</div>

<script>
var cancelFollowObject;
var remarkObject;
var fgList;
var nowfgid = "${fgid}";
// 取消关注的类型（1单个取消2批量取消）
var type = 1;
// 排序和分组查询
var sort = "cdate";
var group = 0;

var page = 1;       // 当前页
var page_size = 18; // 每页的记录数

// 排序
$('.btn-sort').click(function(){
    var sortname = $(this).attr('data-sortname');
    var btnName = $(this).text();
    $(this).closest('ul').prev('a').find('strong').text(btnName);
    sort = sortname;
    searchFollowList(nowfgid,page);
});

// 分组
$('.btn-group').click(function(){
    var sortname = $(this).attr('data-sortname');
    var btnName = $(this).text();
    $(this).closest('ul').prev('a').find('strong').text(btnName);
    group = sortname;
    searchFollowList(nowfgid,page);
});



// 切换箭头的up和down

$('.navbar .btn-hover').hover(
	function(){
		$(this).find('.select-arrow em').removeClass('down').addClass('up');
	},
	function(){
		$(this).find('.select-arrow em').removeClass('up').addClass('down');
	}
);


//  插入表情
$('.btn-emotion').click(function(){
	$(this).sinaEmotion({
		target: $('#letterTextarea')
	});
});



// 下来菜单

$('.btn-hover').mouseover(function(){
	$(this).next('.hover-list').show();
});
$('.btn-hover').mouseout(function(){
	$(this).next('.hover-list').hide();
});

$('.hover-list').mouseover(function(){
	$(this).show();
});
$('.hover-list').mouseout(function(){
	$(this).hide();
});




//  选择!!!!!

var selectArr = new Array();

function changeSelect() {
	var thisUid = $(this).attr("data-uid");
	if ($(this).hasClass('selected')) {
		$(this).removeClass('selected');
		selectArr = $.grep(selectArr, function(value){
			return value != thisUid;
		});

	} else {
		$(this).addClass('selected');

		selectArr = $.unique(selectArr);
		selectArr.push(thisUid);
	};

	var selectSum = selectArr.length;
	if (selectSum>0) {
		$('#sumTip').show();
		$('#sumTip>span').text(selectSum);
		$('#cancleFollow,#addToGroup').removeClass('btn-disabled');
	} else {
		clearSelect();
	}
};

function clearSelect() {
	$('#sumTip').hide();
	$(".list-item").removeClass('selected');
	$('#cancleFollow,#addToGroup').addClass('btn-disabled');
	selectArr.splice(0);
}


//  改变分组
$('#changeGroupDialog').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
    hide : "fade",
	width : "400",
	height : "300",
	buttons: {
		"确定": function() {
		     var fuidStr = "";
             if (type == 2 &&!isnull(selectArr)) {
                 for (var i=0;i<selectArr.length;i++) {
                     fuidStr+=(selectArr[i]+",");
                 }
             } else if (type == 1) {
                fuidStr = cancelFollowObject;
             }
             var fgid;
             var group = document.getElementsByName("group");
		     for(var i=0;i<group.length;i++)
		     {
		        if(group[i].checked)
		           fgid = group[i].value;
		     }
             if (isnull(fgid)) {
                $().message("请选择一个分组");
                return;
             }
             
             var fun=function(data){
                   $("#changeGroupDialog").dialog("close");
                   if(data.s==1){
                        searchFollowGroup();
                        searchFollowList(nowfgid,page);
                   }
               };
               exeAjax(
                    ajaxUrl("${aier_url}${aier_urijs}usermyfollow_moveFollowGroup${aier_suffix}"),
                    fun,{
                        "fuidStr":fuidStr,
                        "fgid":fgid
               });
			
		},"取消": function() {
			$( this ).dialog( "close" );
		}
	}
});

$('#addToGroup').click(function(){
	if (!$(this).hasClass('btn-disabled')) {
		//var changeGroupObject = selectArr;
		type = 2;
		$( "#changeGroupDialog" ).dialog("open");
		//$("#changeGroupDialog .object-info").html(changeGroupObject); // 测试用的,可以删除
	};
});

// 批量取消关注
$('#cancleFollow').click(function(){
    if (!$(this).hasClass('btn-disabled')) {
        $('#cancelFollowName').html('他们');
        type = 2;
        $( "#cancelFollowDialog" ).dialog("open");
    };
});

// dialog 取消关注 
$('#cancelFollowDialog').dialog({
        //背景变暗
        modal: true,
        autoOpen : false,
        show : "fade",
           hide : "fade",
        width : "300",
        height : "200",
        buttons: {
            "确定": function() {
               var fuidStr = "";
	           if (type == 2 && !isnull(selectArr)) {
	              for (var i=0;i<selectArr.length;i++) {
	                  fuidStr+=(selectArr[i]+",");
	              }
	           } else if (type == 1) {
	               fuidStr = cancelFollowObject;
	           }
               var fun=function(data){
                   $("#cancelFollowDialog").dialog("close");
                   if(data.s==1){
                        searchFollowList(nowfgid,page);
                   }
               };
               exeAjax(
                    ajaxUrl("${aier_url}${aier_urijs}usermyfollow_cancelFollow${aier_suffix}"),
                    fun,{
                        "fuidStr":fuidStr
               });
    
                
            },"取消": function() {
                $( this ).dialog( "close" );
            }
        }
    });


// 私信 
$('#letterDialog').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
       hide : "fade",
	width : "400",
	height : "300",
	buttons: {
		"确定": function() {
            var content = $("#letterTextarea").val();
            if (isnull(content)) {
                $().message("请输入私信内容！");
                return;
            }
            
            var fun=function(data){
                   
                   if(data.s==1){
                        $().message("发送成功！");
                        $("#letterTextarea").val("");
                        $("#letterDialog").dialog("close");
                   } else {
                        $().message("发送失败，请稍后再试！");
                   }
               };
               exeAjax(
                    ajaxUrl("${aier_url}${aier_urijs}usermessage_sendLetter${aier_suffix}"),
                    fun,{
                        "ruid":cancelFollowObject,
                        "content":content
               });
			
		},"取消": function() {
			$( this ).dialog( "close" );
			$("#letterTextarea").val("");
		}
	}
});


//  求关注
$('#inviteFollowDialog').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
       hide : "fade",
	width : "300",
	height : "300",
	buttons: {
		"确定": function() {
			var content = $("#inviteFollowText").val();
            if (content.length > 200) {
                 $().message("内容太长！");
                 return;
            }
            var fun=function(data){
               if(data.s==1){
                   $("#inviteFollowText").val("");
                   $('#inviteFollowDialog').dialog("close");
               } else {
                   $().message("求关注失败，请稍后再试！");
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_requestFollow${aier_suffix}"),
                fun,{
                    "fuid":cancelFollowObject,
                    "content":content
           });

		},"取消": function() {
			$( this ).dialog( "close" );
			$("#inviteFollowText").val("");
		}
	}
});


//   新建分组
$('#createGroupDialog').dialog({
	//背景变暗
	modal: true,
	autoOpen : false,
	show : "fade",
       hide : "fade",
	width : "300",
	height : "200",
	buttons: {
		"确定": function() {
            
            var name = $("#groupName").val();
            if (isnull(name)) {
                $().message("请输入分组名！");
                return;
            }
            if (fgList != null && fgList.length > 0) {
                for (var i = 0; i<fgList.length; i++) {
                    if (name == fgList[i].name) {
                        $().message("已存在相同分组！");
                        return;
                    }
                }
            }
            var fun=function(data){
               if(data.s==1){
                   searchFollowGroup();
                   $("#groupName").val("");
                   $('#createGroupDialog').dialog("close");
               } else if(data.s == 10001){
                   $().message("已存在相同分组！");
               } else {
                   $().message("创建失败，请稍后再试！");
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollowGroup${aier_suffix}"),
                fun,{
                    "name":name
           });

		},"取消": function() {
			$( this ).dialog( "close" );
			$("#groupName").val("");
		}
	}
});

$('#createGroup').click(function() {
	$('#createGroupDialog').dialog("open");
});

    $(document).ready(function() {
        searchFollowGroup();
        searchFollowList(nowfgid,page);
    });
    
    // 获取分组列表以及每个分组的人数
    function searchFollowGroup() {
        var fun=function(data){
               if(data.s==1){
                   $("#cfollow").text(data.followCount);
                   $("#allfollow").text(data.followCount);
                   var html = "";
                   var gr = "";
                   fgList = data.fgList;
                   if (data.fgList != null && data.fgList.length != 0) {
                       for (var i=0;i<data.fgList.length;i++) {
                            var fg = data.fgList[i];
                            
                            html += '<div class="tab-small" data-fgid = "'+fg.fgid+'"><a class="btn btn-follow-group" onclick = "searchFollowList('+fg.fgid+')">'+fg.name+' （<span>'+fg.count+'</span>）</a></div>';
                            
                            if (fg.fgid != -1) {
                                gr += '<input name="group" type="radio" value = "'+fg.fgid+'">'+fg.name+'</input>';
                            }
                       }
                   }
                   
                   $("#group").html(html);
                   $("#groupRadio").html(gr);
                   
                   $('.btn-follow-group').click(function () {
                	   var nfgid = $(this).closest('.tab-small').attr('data-fgid');
                	   searchFollowList(nfgid,1);
                   });
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchFollowGroup${aier_suffix}"),
                fun,{
                    
           });
    }
    
    // 获取关注列表
    function searchFollowList(fgid,nowpage) {
    	if (fgid == -2) {
    		fgid = null;
    	}
        page = nowpage;
        var fun=function(data){
               if(data.s==1){
                   var html = "";
                   if (data.followList != null && data.followList.length != 0) {
                       for (var i = 0; i<data.followList.length;i++) {
                           var fo = data.followList[i];
                           html += '<div class="list-item" data-uid="';
                           html += fo.fuid;
                           html += '"><div class="top"><div class="avatar"><a href="${aier_url}user/uccomm_userCenter.shtml?in_uid='+fo.fuid+'"><img src="${get_picturl_url}small/'+fo.headimg+'" alt=""></a></div>';
                           if (!isnull(fo.remark)) {
                               html += '<div class="namebar"><div class="name"><a href="javascript:void(0);">'+fo.remark+'</a></div>';
                           } else {
                               html += '<div class="namebar"><div class="name"><a href="javascript:void(0);">'+fo.nickname+'</a></div>';
                           }
                           
                           html += '<div class="relationship"><a href="javascript:void(0);"><em class="icon-1 icon-1-yiguan"></em><span>'+fo.followStr+'</span></a></div><div class="group"><a class="change-group" href="javascript:void(0);">'+fo.fgName+'</a></div></div></div>';
                           html += '<div class="bottom">';
                           if (!isnull(fo.desinfo)) {
	                           if (fo.desinfo.length > 16 ) {
				                   html += '<div class="intro"><span>简介:</span><span>'+fo.desinfo.substring(0,15)+'...</span></div>';
				               } else {
				                   html += '<div class="intro"><span>简介:</span><span>'+fo.desinfo+'</span></div>';
				               }
                           }
                           html += '<div class="follow-way">';
                           if (fo.state == 1) {
                               html += '<a class="invite-follow">求关注</a><span>|</span>';
                           } else {
                               html += '<a class="send-letter">发私信</a><span>|</span>';
                           }
                           html += '<a class="remark-name">设置备注</a><span>|</span><a class="cancel-follow">取消关注</a></div></div><div class="btn btn-select"><a href="javascript:void(0);"><em class="icon"></em></a></div></div>';
                       }
                   }
                   nowfgid = fgid;
                   $("#followList").html(html);
                   
                   // 修改备注名
                   $('.remark-name').click(function() {
					    remarkObject = $(this).parents('.list-item').attr('data-uid');
					    var remarknameDom =$(this);
				        //  设置或修改备注名
						$('#remarkNameDialog').dialog({
						    //背景变暗
						    modal: true,
						    autoOpen : false,
						    show : "fade",
						    hide : "fade",
						    width : "300",
						    height : "200",
						    buttons: {
						        "确定": function() {
						
						           var fun=function(data){
						               $("#remarkNameDialog").dialog("close");
						               if(data.s==1){
						                    
						                   // 修改备注
						                   remarknameDom.parents('.list-item').find(".name>a").html($("#remarkNameInput").val());
						               }
						           };
						           exeAjax(
						                ajaxUrl("${aier_url}${aier_urijs}userchumscircle_updateRemark${aier_suffix}"),
						                fun,{
						                    "auid":remarkObject,
						                    "remark":$("#remarkNameInput").val()
						           });
						
						        },"取消": function() {
						            $( this ).dialog( "close" );
						        }
						    }
						});
						$('#remarkNameDialog').dialog('open');
					});
					
                   // 取消关注
                   $('.cancel-follow').click(function(){
					    cancelFollowObject = $(this).parents('.list-item').attr('data-uid');
					    var cancelFollowName = $(this).parents('.list-item').find(".name>a").html();
					    $('#cancelFollowName').html(cancelFollowName);
					    type = 1;
					    $( "#cancelFollowDialog" ).dialog("open");
				   });
				   // 求关注
				   $('.invite-follow').click(function() {
					    cancelFollowObject = $(this).parents('.list-item').attr('data-uid');
					    $('#inviteFollowDialog').dialog('open');
				   });
				   // 发私信
				   $('.send-letter').click(function(){
					    cancelFollowObject = $(this).parents('.list-item').attr('data-uid');
					    $('#letterDialog').dialog("open");
					});
					$(".list-item").click(changeSelect);
                    $('#sumTip>a').click(clearSelect);
                    
                    // 修改分组
                    $('.change-group').click(function(){
					    cancelFollowObject = $(this).parents('.list-item').attr('data-uid');
					    type = 1;
					    $( "#changeGroupDialog" ).dialog("open");
					});
               }
               if (isnull(fgid)) {
                   fgid = -2;
               }
               // 更新分页显示
               page = data.page;
               toLoadPage(page, page_size, data.page_count, data.count, "page", "searchFollowList", fgid, null);
               if (data.count == 0) {
                   $("#page").css("display","none");
               } else {
                   $("#page").css("display","block");
               }
           };
           exeAjax(
                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchAllFollow${aier_suffix}"),
                fun,{
                    "page":page,
                    "page_size":page_size,
                    "fgid":fgid,
                    "sort":sort,
                    "state":group
           });
    }
    
</script>


</body>
</html>